<template>
  <div class="collect">
    <van-nav-bar class="bc" title="我的收藏" left-text="返回"  left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="search" size="25" color="#000000"/>
          <span class="bk"><a href="##" style="color:#000000">管理</a></span>
        </template>
    </van-nav-bar>
    <div class="lyy-bg" v-if="$store.state.islogin">
      <div class="lyy-hei"></div>
      <div class="lyy-neia lyy-gs1" v-for="(items,index) in list" :key="index">
        <!-- @click="handleShopSelect1()" -->
        <!-- :value="items.id" -->
        <van-checkbox
          style="padding:0px 5px 0px 0px"
          v-show="isShow"
          v-model="items.checked"
          @change="choose"
          checked-color="#07c160"
        ></van-checkbox>
        <div class="lyy-nei">
          <div class="lyy-gs">
            <div class="lyy-gs1">
              <div class="lyy-tu">
                <img :src="items.shop_logo" width="68px" height="68px" />
              </div>
              <div class="lyy-jl">
                <div class="lyy-word">{{items.shop_name}}</div>
                <div class="lyy-word2">
                  <span>
                  <van-icon name="like-o" />
                  </span>
                  <span>{{items.num}}</span>人已关注
                </div>
              </div>
              <div class="lyy-word3">进店逛逛 ></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 全选管理按钮 -->
      <div class="lyy-qx lyy-gs1" v-show="isShow">
        <div>
          <van-checkbox
            class="lyy-qx2"
            v-model="checked"
            checked-color="#07c160"
            @click="allCheck"
          >全选</van-checkbox>
          <!-- @click="handleShopSelect" -->
        </div>
        <div class="lyy-del" @click="deleteData">删除</div>
      </div>
      <div class="lyy-gl" @click="toggle()">
        <div class="lyy-gl2">
          <div class="lyy-gl3">
           <van-icon name="delete-o" size="30"/>
          </div>
        </div>
      </div>
    </div>
    <van-empty v-else  description="亲，您还没有登录哟！" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false, //全选
      isShow: false,
	//测试数据
      list: [
        {
          id: "1",
          shop_name:"东方园南汇西瓜....",
          num: 79464,
          shop_logo: require("../assets/8424.png"),
          checked: false
        },
        {
          id: "2",
          shop_name:"上海市南汇西瓜....",
          num: 563,
          shop_logo: require("../assets/8424.png"),
          checked: false
        },
        {
          id: "3",
          shop_name:"8424麒麟小西瓜....",
          num: 74,
          shop_logo: require("../assets/8424.png"),
          checked: false
        },
        {
          id: "4",
          shop_name:"福建玉荷包荔枝....",
          num: 7421,
          shop_logo: require("../assets/8424.png"),
          checked: false
        },
        {
          id: "5",
          shop_name:"无锡阳山水蜜桃....",
          num: 4237,
          shop_logo: require("../assets/8424.png"),
          checked: false
        },
      ]
    };
  },

  methods: {
    onClickLeft() {
      this.$router.push("/me");
    },
    toggle() {
      this.isShow = !this.isShow;
    },
    //全选
    allCheck() {
      let a = !this.checked;
      this.list = this.list.map(e => {
        e.checked = a;
        return e;
      });
    },

    //单选
    choose() {
      let a = true;
      this.list.forEach(e => {
        if (e.checked === false) {
          a = false;
        }
      });
      this.checked = a;
    },

    //删除

    deleteData() {
      let arr = [];

      // var len = this.list.length;
      this.list.forEach(e => {
        e.checked ? 0 : arr.push(e);
      });

      this.list = arr;
    },
    addData() {
      let _self = this;
      let data = {
        shop_id: 9,
        uid: 10
      };
    }
  }
};
</script>

<style scoped>
.collect .bc {
  background: #f1f1f1;
}
.collect .bk {
  margin-left: 20px;
}
.collect .lyy-bg {
  background-color: #f8f6f6;
}
.collect .lyy-hei {
  height: 5px;
}
.collect .lyy-nei {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
}
.collect .lyy-neia {
  padding: 0px 0px 5px 0px;
  margin: 0px 9px 0px 9px;
}
.collect .lyy-tu {
  width: 68px;
  height: 68px;
  background: rgba(255, 255, 255, 1);
  border: 0px solid rgba(238, 238, 238, 1);
}
.collect .lyy-gs {
  padding: 17px 0px 16px 18px;
  flex-direction: row;
}
.collect .lyy-gs1 {
  display: flex;
  justify-content: space-between;
}
.collect .lyy-word {
  font-size: 12px;
  font-family: "PingFang SC";
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 18px;
  padding: 0px 0px 16px 0px;
}
.collect .lyy-word2 {
  font-size: 13px;
  font-family: "Adobe Heiti Std";
  font-weight: normal;
  color: #999999;
}
.collect .lyy-word3 {
  font-size: 11px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(114, 117, 115, 1);
  line-height: 18px;
  padding: 15px 13px 0px 0px;
}
.collect .lyy-jl {
  padding: 0px 40px 0px 16px;
}
.collect .lyy-gl {
  position: fixed;
  bottom: 4rem;
  right: 1.5rem;
}

.collect .lyy-gl3 {
  padding: 6px 8px;
}
.collect .lyy-qx {
  /* width: 320px; */
  height: 51px;
  width: 100%;
  position: fixed;
  bottom: 0rem;
  /* right: 0.5rem; */
  background: white;
}
.collect .lyy-del {
  width: 65px;
  height: 26px;
  border-radius: 13px;
  background: rgba(241, 13, 59, 1);
  color: white;
  text-align: center;
  position: relative;
  top: 10px;
  right: 10px;
  line-height: 24px;
  font-size: 12px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.collect .lyy-qx2 {
  position: relative;
  top: 10px;
  left: 10px;
}
</style>
